import {Component, ViewChild, Input} from '@angular/core';

/**
 * Generated class for the GCollapseComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'g-collapse',
  templateUrl: 'g-collapse.html'
})
export class GCollapseComponent {

  @Input()
  defaultTitle: string = ''
  @Input()
  defaultShow: boolean
  @ViewChild('collapse') collapse
  @ViewChild('title') cTitle
  @ViewChild('content') content

  show: boolean
  collapseElm:any
  contentElm:any
  titleElm:any

  constructor() {

  }

  ngAfterViewInit() {
    this.collapseElm = this.collapse.nativeElement
    this.contentElm = this.content.nativeElement
    this.titleElm = this.cTitle._elementRef.nativeElement
    this.defaultShow ? this.setShow() : this.setHide()
    this.show = this.defaultShow
  }

  toggle() {
    this.show = !this.show
    this.show ? this.setShow() : this.setHide()
  }

  setShow() {
    this.collapseElm.style.height = this.contentElm.clientHeight + this.titleElm.clientHeight + 'px'
  }

  setHide() {
    this.collapseElm.style.height = this.titleElm.clientHeight + 'px'
  }

}
